<template>
    <div class="login-page">
        <div class="body center">
            <div class="title">请登录</div>
            <div class="field row">
                <div class="label">邮箱</div>
                <div class="input">
                    <input
                        v-model="email"
                        type="text"
                        placeholder="请输入"
                        @blur="onBlur(emailKey, email)"
                    />
                </div>
            </div>

            <div class="field row">
                <div class="label">密码</div>
                <div class="input">
                    <input
                        v-model="password"
                        type="text"
                        placeholder="请输入"
                        @blur="onBlur(passwordKey, password)"
                    />
                </div>
            </div>

            <div class="btn btn-login button-green" @click="onLogin">登录</div>
            <div class="btn btn-signup button-green" @click="onSignup">注册</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            email: "",
            password: "",
            emailKey: "wf-login-email",
            passwordKey: "wf-login-password",
            redirectPath: ""
        };
    },
    created() {
        this.getStorage();
        this.getLoginState();
    },
    methods: {
        getLoginState() {
            this.$login.hasLoginState();
            console.log("getLoginState", this.$login);
        },
        onSignup() {
            const { email, password } = this;
            console.log("onLogin", email, password);

            this.$login
                .signUpWithEmailAndPassword(email, password)
                .then(res => {
                    this.$showToast("已发送验证邮件，请查看收件箱按指示激活");
                })
                .catch(err => {
                    this.$showToast(err.message || "系统异常");
                });
        },

        onLogin() {
            const { email, password } = this;

            this.$login
                .signInWithEmailAndPassword(email, password)
                .then(user => {
                    console.log("登录成功", user);
                    this.$store.commit("updateUserInfo", {
                        password,
                        ...user
                    });
                    this.addUserAccount();
                    this.$showToast("登录成功");
                    this.redirect();
                })
                .catch(err => {
                    console.log("err", err);
                    this.$showToast("登录失败，请检查邮箱或密码");
                });
        },

        // 添加账户信息到本地缓存
        addUserAccount() {
            let isExit = false;
            let newUser = this.$store.state.userInfo;
            let accounts = this.$browser.getStorage("wf-accounts") || [];
            accounts.forEach(a => {
                if (a.uid === newUser.uid) {
                    isExit = true;
                }
            });
            isExit || accounts.push(newUser);
            console.log("accounts", accounts);
            this.$browser.setStorage("wf-accounts", accounts);
        },

        redirect() {
            const href = window.location.href;
            const fullPath = this.$route.fullPath;
            let redirectPath = this.$route.redirectPath;
            if (redirectPath) {
                let p = href.replace(fullPath, redirectPath);
                p = decodeURIComponent(redirectPath);
                window.location.href = p;

                return;
            }
            redirectPath = href.replace(fullPath, "/profile/index");
            console.log("redirectPath", redirectPath);
            window.location.href = redirectPath;
        },

        onBlur(key, data) {
            this.$browser.setStorage(key, data);
        },

        getStorage() {
            const email = this.$browser.getStorage(this.emailKey);
            const password = this.$browser.getStorage(this.passwordKey);
            this.email = email;
            this.password = password;
        }
    }
};
</script>


<style lang="less" scoped>
.login-page {
    width: 100vw;
    min-height: 100vh;
    background: #f5f5f5;
    .body {
        top: 30%;
        width: 100%;
        box-sizing: border-box;
        padding: 0 30px;

        .title {
            font-size: 36px;
            font-weight: 600;
            color: #07c160;
            text-align: center;
            margin-bottom: 40px;
        }

        .field {
            padding: 30px 0;
            border-bottom: 1px solid #aaa;
            align-items: center;

            .label {
                padding: 0 60px 0 20px;
            }
            .input {
                flex: 1 1 auto;
                input {
                    width: 100%;
                }
            }
        }

        .btn {
            margin-top: 30px;
            padding: 30px 0;
            text-align: center;
            border-radius: 10px;
        }

        .btn-signup {
            background: #aaa;
        }
    }
}
</style>    